<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 3 | Data Tables</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">


</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <button id="audit" class="btn btn-primary btn-sm">批量审批</button>
                        <input id="contentId" style="display: none">
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <form id="form" role="form" action="">
                            <table id="example2" class="table table-bordered table-hover">
                            </table>
                        </form>

                    </div>
                    <!-- /.card-body -->
                </div>
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
    <footer class="main-footer text-center" style="margin-left: 0%;">
        <div class="d-none d-sm-block">
            <b>版本:</b> 1.0
        </div>
        <!-- 按钮触发模态框 -->
        <strong>Copyright &copy; 2014-2018 <a href="http://adminlte.io">咸阳恒源汽贸有限公司</a>.</strong>保留所有权.
    </footer>

    <!-- Control Sidebar -->
    <aside class="control-sidebar control-sidebar-dark">
        <!-- Control sidebar content goes here -->
    </aside>
    <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->


<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width: 1000px;">
        <div class="modal-content">
            <div class="modal-header">

                <h4 class="modal-title" id="myModalLabel">收入信息</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <!-- form start -->
                <form role="form" action="">
                    <div class="row mt-2">
                        <div class="col-lg-2">
                            <div class="">
                                <div style=" line-height: 1.5em;margin-top: 6px;" class="text-center"><code>*</code>&nbsp;&nbsp;交易编号
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="form-group">
                                <input name="code" type="text" class="form-control" id="p_id" placeholder="" disabled>
                                <input name="iid" type="text" class="form-control" id="u_fid" placeholder=""
                                       style="display: none">
                            </div>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-lg-2">
                            <div class="">
                                <div style=" line-height: 1.5em;margin-top: 6px;" class="text-center"><code>*</code>&nbsp;&nbsp;员工姓名
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="form-group">
                                <input name="name" type="text" class="form-control" id="p_name" value="">
                            </div>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div class="col-lg-2">
                            <div class="">
                                <div style=" line-height: 1.5em;margin-top: 6px;" class="text-center"><code>*</code>&nbsp;&nbsp;交易类型
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="form-group">
                                <input name="tname" type="text" class="form-control" id="p_tname" value="">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-2">
                            <div class="">
                                <div style=" line-height: 1.5em;margin-top: 6px;" class="text-center"><code>*</code>&nbsp;&nbsp;金额
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="form-group">
                                <input name="imoney" type="text" class="form-control" id="p_imoney" value="">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-2">
                            <div class="">
                                <div style=" line-height: 1.5em;margin-top: 6px;" class="text-center"><code>*</code>&nbsp;&nbsp;描述
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="form-group">
                                <input name="idesc" type="text" class="form-control" id="idesc" value="cn">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-2">
                            <div class="">
                                <div style=" line-height: 1.5em;margin-top: 6px;" class="text-center"><code>*</code>&nbsp;&nbsp;发起时间
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="form-group">
                                <input name="itime" type="text" class="form-control" id="itime" value="cn">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-2">
                            <div class="">
                                <div style=" line-height: 1.5em;margin-top: 6px;" class="text-center"><code>*</code>&nbsp;&nbsp;交易状态
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="form-group">
                                <select id="success" name="success" class="form-control select2" style="width: 100%;">
                                    <option value="1">交易成功</option>
                                    <option value="0">交易失败</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-2">
                            <div class="">
                                <div style=" line-height: 1.5em;margin-top: 6px;" class="text-center"><code>*</code>&nbsp;&nbsp;成功时间
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-9">
                            <div class="form-group">
                                <input name="successTime" type="text" class="form-control" id="successTime" value="cn">
                            </div>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <!--<button id="save" type="button" class="btn btn-primary">保存</button>-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<!--点击删除按钮后弹出的页面-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="height: 200px">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">
                    温馨提示
                </h4>
                <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">-->
                <!--&times;-->
                <!--</button> -->
            </div>
            <div class="modal-body">
                请确认是否审批通过该条记录？
                <input id="del_id" style="display: none"/>
            </div>
            <div class="modal-footer">
                <button id="delBtn" type="submit" class="btn btn-primary" value="submit">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

<div class="modal fade" id="saveModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="height: 200px">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="saveModel">
                    温馨提示
                </h4>
                <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">-->
                <!--&times;-->
                <!--</button> -->
            </div>
            <div class="modal-body">
                请确认是否批量审批通过记录？
            </div>
            <div class="modal-footer">
                <button id="save5" type="submit" class="btn btn-primary" value="submit">确定</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script type="text/javascript" charset="utf-8" src="./plugins/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="./plugins/ueditor/ueditor.all.min.js"></script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="./plugins/ueditor/lang/zh-cn/zh-cn.js"></script>
<!-- Select2 -->
<script src="./plugins/select2/select2.full.min.js"></script>


<!-- page script -->
<script>
    $(function () {
        $('.select2').select2();
        //gisList();
        var user_table = $('#example2').DataTable({
            "language": {
                "url": "./plugins/datatables/chinese.txt"
            },
            "serverSide": true,
            "paging": true,
            "lengthChange": true,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "ajax": {
                "url": './OutcomeList.action?type=0',
                "type": 'POST'
            },
            columns: [
                {
                    "data": null,
                    "title": "<input type=\"checkbox\" id=\"select-all\"  onclick='selectAll(this)'>全选</input>",
                    "sClass": "text-tables-center text-center",
                    "checkbox": true,
                    "sortable": false,
                    width: 60,
                    render: function (data, type, row) {
                        return "<input class=\"checkbox_select\" type=\"checkbox\" data-status=\"'+ row.status + '\"name=\"ids\" value=" + row.pid + ">";
                    }
                },
                {
                    "data": null,
                    "title": "序号",
                    "sClass": "text-tables-center text-center",
                    "createdCell": function (nTd, sData, oData, iRow, iCol) {
                        var startnum = this.api().page() * (this.api().page.info().length);
                        $(nTd).html(iRow + 1 + startnum); //分页行号累加：$(nTd).html(iRow+1);
                    }
                },
                {data: 'account.name', 'title': "员工", 'sClass': "text-center"},
                {data: 'paytype.pname', 'title': "支出类型", 'sClass': "text-center", "width": 200},
                {data: 'pmoney', 'title': "提现金额", 'sClass': "text-center"},
                {data: 'pdesc', 'title': "描述", 'sClass': "text-center"},
                {data: 'ptime', 'title': "发起时间", 'sClass': "text-center"},
                {
                    data: 'success', 'title': "交易状态", 'sClass': "text-center",
                    render: function (data, type, row) {
                        if (row.success) {
                            return "交易成功";
                        } else {
                            return "提现申请中";
                        }
                    }
                },
                {
                    data: 'success', 'title': "交易状态", 'sClass': "text-center",
                    render: function (data, type, row) {
                        return "<button id='add' class='btn btn-primary btn-sm' onclick='lookUpLocation(" + JSON.stringify(row) + ");'>审批通过</button>";

                    }
                },
                {data: 'successTime', 'title': "交易成功时间", 'sClass': "text-center"}
            ]
        });

        function userSearchBtn() {
            user_table.ajax.reload();   // 这边的user_table，是由初始化datatables的变量名
        }

        //点击编辑图标出现编辑框
        $("#example2 tbody").unbind('click').on("click", ".edit-btn", function () {
            var id = $(this).attr("id");
            if (id != -1) {
                var url = encodeURI("./getOutcomeDetail.action");
                $.ajax({
                    type: 'POST',
                    url: url,
                    data: {
                        "contentId": id,
                        "type": 1
                    },
                    dataType: "json",
                    success: function (result) {
                        if (result.success) {
                            //刷新表格
                            var data = result.data;
                            $("#p_id").val("FU00" + data.pid);
                            $("#u_fid").val(data.pid);
                            $("#p_name").val(data.account.name);
                            $("#p_tname").val(data.paytype.pname);
                            $("#p_imoney").val(data.pmoney);

                            $("#itime").val(data.ptime);
                            $("#idesc").val(data.pdesc);
                            $("#successTime").val(data.successTime);

                            $('#myModal').modal('show');
                        } else {

                        }
                    },
                    dataType: "json"
                });
            } else {
                $('#myModal').modal('show');
            }
        });

        //保存按钮
        $("#example2 tbody").on("click", ".save-btn", function () {
            var id = $(this).attr("id");
            var tds = $(this).parents("tr").children();
            var sTds = tds.length;
            var lisval = [];
            for (var i = 0; i < sTds; i++) {
                if (i < sTds - 1)
                    lisval.push(tds.eq(i).children("input").val());
                else lisval.push(tds.eq(i).children("input").val())
            }
            if (i == sTds - 1) lisval.push();
            if (lisval[1] == "") {
                toNotification("警告！", "证照属性设置不能为空！", "warning");
                return false;
            } else if (lisval[1].length > 10) {
                toNotification("警告！", "证照属性设置不能超过十个字符！", "warning");
                return false;
            } else {
                $.each(tds, function (i, val) {
                    var jqob = $(val);
                    //把input变为字符串
                    if (!jqob.has('i').length) {
                        var txt = jqob.children("input").val();
                        jqob.html(txt);
                    }
                });
                $(this).toggleClass("edit-btn fa-pencil");
                $(this).toggleClass("save-btn fa-save");
                //保存数据
                SaveData(lisval, id);
            }

        });


        //证照属性设置保存信息
        function SaveData(msg, id) {
            var data = {
                id: id,   //-1表示是新增
                typeName: msg
            }
            var url = encodeURI("./saveUserInnovatetutor.action");

            $.ajax({
                type: 'POST',
                url: url,
                data: data,
                success: function (result) {
                    if (data.successed) {
                        toNotification("提示！", "操作成功！", "success");
                        //刷新表格
                        userSearchBtn();
                    } else {
                        toNotification("操作失败！", data.message, "error");
                        //刷新表格
                        userSearchBtn();
                    }
                },
                dataType: "json"
            });
        }

        //证照属性设置保存信息
        $("#save").on("click", function SaveData() {
            var data = $('form').serialize();
            //序列化获得表单数据，结果为：user_id=12&user_name=John&user_age=20
            var submitData = decodeURIComponent(data, true);
            //submitData是解码后的表单数据，结果同上
            var url = encodeURI("./saveUserPark.action");
            $.ajax({
                type: 'POST',
                url: url,
                data: data,
                dataType: "json",
                success: function (result) {
                    if (result.success) {
                        //刷新表格
                        $("#myModal").modal('hide');  //手动关闭
                        userSearchBtn();
                    } else {
                        //刷新表格
                        $("#myModal").modal('hide');  //手动关闭
                        userSearchBtn();
                    }

                    $("#myModal").bind('hide.bs.modal', function () {
                        $(".modal-backdrop").remove();
                    });
                },
                dataType: "json"
            });
        });


        //证照属性设置删除
        $("#example2 tbody").on("click", ".del-btn", function () {
            var id = $(this).attr("id");
            $("#del_id").val(id);

            $('#deleteModal').modal('show');
            $("#deleteModal").bind('hide.bs.modal', function () {
                $(".modal-backdrop").remove();
            });

            $("#deleteModal").on('hidden.bs.modal', '.modal', function () {
                $(this).removeData('bs.modal');
            });
        });

        //证照属性设置新添加信息
        $("#add").on("click", function SaveData() {
            $("#p_id").val("");
            $("#u_fid").val("");
            $("#p_name").val("");
            $("#p_address").val("");
            $("#p_website").val("");
            $("#p_tel").val("");
            $("#p_image").val("");
            $("#p_introduce").val("");
            $("#pimg").attr("src", "");
            UE.getEditor('editor').setContent("");

            $('#myModal').modal('show');
        });

        //证照属性设置删除
        $("#delBtn").on("click", function () {
            $("#delBtn").attr("disabled","true");
            var id = $("#contentId").val();
            var data = {"contentId": id};
            var url = "./auditOutCome.action";
            //执行删除
            $.ajax({
                type: 'POST',
                url: url,
                data: data,
                dataType: "json",
                success: function (result) {
                    if (result.success) {

                        userSearchBtn();
                    } else {
                        userSearchBtn();
                    }
                    $('#deleteModal').modal('hide');
                    $("#delBtn").attr("disabled","true");
                },
                dataType: "json"
            });

        });

        //证照属性设置保存信息
        $("#save5").on("click", function SaveData() {
            $("#save5").val("保存中....");
            $("#save5").attr("disabled","true");
            var data = $('#form').serialize();
            //序列化获得表单数据，结果为：user_id=12&user_name=John&user_age=20
            var submitData = decodeURIComponent(data, true);
            //submitData是解码后的表单数据，结果同上
            var url = encodeURI("./auditBatchOutCome.action");
            $.ajax({
                type: 'POST',
                url: url,
                data: data,
                dataType: "json",
                success: function (result) {
                    if (result.success) {

                        //刷新表格
                        $("#saveModel").modal('hide');  //手动关闭
                        userSearchBtn();
                    } else {
                        //刷新表格
                        $("#saveModel").modal('hide');  //手动关闭
                        userSearchBtn();
                    }

                    $("#saveModel").bind('hide.bs.modal', function () {
                        $(".modal-backdrop").remove();
                    });

                    $("#save5").text("保存");
                    $("#save5").attr("disabled","false");
                },
                dataType: "json"
            });
        });

        $("#audit").on('click', function audit() {
            $("#saveModel").modal("show");
        })

        //获得标识
        function getActionId() {
            return new Date().getTime();
        }

    })
    ;

    function lookUpLocation(item) {
        $("#contentId").val(item.pid);
        $('#deleteModal').modal('show');
        $("#deleteModal").bind('hide.bs.modal', function () {
            $(".modal-backdrop").remove();
        });

        $("#deleteModal").on('hidden.bs.modal', '.modal', function () {
            $(this).removeData('bs.modal');
        });
    }

    function uploadImg() {
        $('#easyContainer').easyUpload({
            allowFileTypes: '*.png;*.jpg;',//允许上传文件类型，格式'*.jpg;*.doc;*.pdf'
            allowFileSize: 100000,//允许上传文件大小(KB)
            selectText: '选择文件',//选择文件按钮文案
            multi: false,//是否允许多文件上传
            multiNum: 1,//多文件上传时允许的文件数
            showNote: true,//是否展示文件上传说明
            note: '提示：最多上传1个文件，支持格式为doc、pdf、jpg',//文件上传说明
            showPreview: true,//是否显示文件预览
            url: './fileUpload.action',//上传文件地址
            fileName: 'file',//文件filename配置参数
            formParam: {
                /*token: $.cookie('token_cookie')//不需要验证token时可以去掉*/
            },//文件filename以外的配置参数，格式：{key1:value1,key2:value2}
            timeout: 10000,//请求超时时间
            okCode: 200,//与后端返回数据code值一致时执行成功回调，不配置默认200
            successFunc: function (res) {
                console.log('成功回调', res);
                if (res.fileName) {
                    $("#pimg").attr("src", res.fileName);
                    $("#p_image").val(res.fileName);
                }

            },//上传成功回调函数
            errorFunc: function (res) {
                console.log('失败回调', res);
            },//上传失败回调函数
            deleteFunc: function (res) {
                console.log('删除回调', res);
            }//删除文件回调函数
        });
    }


    function gisList() {
        var url = encodeURI("./GISList.action");
        $.ajax({
            type: 'POST',
            url: url,
            data: {
                'start': 0,
                'length': 100000
            },
            dataType: "json",
            success: function (result) {
                if (result.status == 200) {
                    //刷新表格
                    var data = result.data;

                    var gis_select = $("#eduction");
                    $.each(data, function (i, val) {
                        gis_select.append("<option value='" + val.gid + "'>" + val.address + "</option>");
                    });
                } else {

                }
            },
            dataType: "json"
        });
    }

    function selectAll(e) {
        if (e.checked) {
            $('.checkbox_select').each(function () {
                this.checked = true;
            });
        } else {
            $('.checkbox_select').each(function () {
                this.checked = false;
            });
        }
    }
</script>
</body>
</html>
